<template>
  <ukulele-bpmn-modeler :new-process-diagram-xml='newProcessDiagramXml' :process-info='processInfo' :loading='loading'
    @saveBpmn='saveBpmn' @getNodeAction='getNodeAction'  @getAreaAction="getAreaAction" @getDepartmentAction="getDepartmentAction"
    @getRoleAction="getRoleAction" @getRuleAction="getRuleAction"/>
</template>

<script>
import ukuleleBpmnModeler from './modeler.vue'
export default {
  components: { ukuleleBpmnModeler },
  name: 'App',
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    const template = localStorage.getItem('flowTemplate');
    if (template) {
      this.newProcessDiagramXml = template;
    }
    this.processInfo.processId = this.getQueryParameter('processId');
    this.processInfo.processKey = this.getQueryParameter('processKey');
    this.processInfo.processName = this.getQueryParameter('processName');
    this.processInfo.tenantId = this.getQueryParameter('tenantId');
  },
  // 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
  mounted() {
  },
  data() {
    return {
      newProcessDiagramXml: '',
      processInfo: { processId: '', processKey: '', processName: '', tenantId: '' },
      loading: false
    }
  },
  methods: {
    getQueryParameter(key) {
      const parameters = new URLSearchParams(window.location.search);
      const value = parameters.get(key);
      return value || '';
    },
    // 保存bpmn文件数据
    saveBpmn(data) {
      console.log(data)
      window.parent.postMessage(
        {
          msg: data,
          key: 'flowTemplateData'
        },
        '*'
      );
    },
    // 获取节点按钮
    getNodeAction(param, callback) {
      const result = [{ value: 'draft', label: '草稿' }, { value: 'pass', label: '审批' },
        { value: 'reject', label: '拒绝' }, { value: 'return', label: '退回' }]
      setTimeout(() => {
        callback(result)
      }, 2000)
    },
    getAreaAction(callback) {
      // 获取区域动作
      this.$axios.get('/flow/userInfo/getAreaTree/test')
        .then(res => {
          if (res || res.data || res.data.children) {
            callback(res.data.children)
          }
        }).catch((e) => { console.error(e) })
    },
    getDepartmentAction(callback) {
      // 获取部门动作
      this.$axios.get('/prod-api/flow/userInfo/getDepTree/test')
        .then(res => {
          if (res || res.data || res.data.children) {
            callback(res.data.children)
          }
        }).catch((e) => { console.error(e) })
    },
    getRoleAction(callback) {
      // 获取角色动作
      this.$axios.get('/prod-api/flow/userInfo/getRoleList/test')
        .then(res => {
          if (res) {
            callback(res.data)
          }
        }).catch((e) => { console.error(e) })
    },
    getRuleAction(callback) {
      // 获取规则动作
      this.$axios.get('/prod-api/flow/userInfo/getFlowRuleList/test')
        .then(res => {
          if (res) {
            callback(res.data)
          }
        }).catch((e) => { console.error(e) })
    }
  }
}
</script>

<style scoped>
</style>
